'use client'

import {
  Box,
  Container,
  Flex,
  Heading,
  Separator,
  Text,
} from '@radix-ui/themes'
import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'

import { ComponentCard } from '@/components/ComponentCard'
import { ALL_COMPONENT_DATA } from '@/components/constants'
import { DefaultContainer } from '@/components/DefaultContainer'
import { Footer } from '@/components/Footer'
import { Navbar } from '@/components/Navbar'

export default function ButtonsPage() {
  return (
    <div>
      <Navbar />
      <DefaultContainer py="6">
        <Flex align="center">
          <Heading size="9">Buttons</Heading>
        </Flex>
        <Separator style={{ width: '100%' }} my="5" />
        <ResponsiveMasonry>
          <Masonry gutter="18px">
            {ALL_COMPONENT_DATA.filter((c) => c.tags.includes('button')).map(
              (data) => {
                return (
                  <ComponentCard
                    key={`${data.library}-${data.name}`}
                    name={data.name}
                    library={data.library}
                    docsLink={data.docsLink}
                  >
                    {data.component}
                  </ComponentCard>
                )
              }
            )}
          </Masonry>
        </ResponsiveMasonry>
      </DefaultContainer>
      <Footer />
    </div>
  )
}
